<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="UTF-8">
    <title>未来小说网--用户资料</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0,maximum-scale=1.0, user-scalable=no" />

    <link href="https://cdn.bootcdn.net/ajax/libs/cropperjs/1.5.7/cropper.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css">
    <link rel="stylesheet" href="../../resources/font/iconfont.css" th:href="@{/resources/font/iconfont.css}">
    <link rel="stylesheet" href="../../resources/css/all.css" type="text/css" th:href="@{/resources/css/all.css}">
    <link rel="stylesheet" href="../../resources/css/fix-nav.css" type="text/css" th:href="@{/resources/css/fix-nav.css}">
    <link rel="stylesheet" href="../../resources/css/member.css" type="text/css" th:href="@{/resources/css/member.css}">
    <script src="../../resources/js/down.js" type="text/javascript" th:src="@{/resources/js/down.js}"></script>

</head>

<body>
    <p style="display: none" th:if="${session.currentAccount} ne null" id="AccoundId" th:text="${session.currentAccount.uid}"></p>
     <p style="display: none" id="pd" th:text="${session.currentAccount} eq null"></p>
    <div class="wrap">
        <!-- 导航条 -->
        <div class="fixed-nav">
            <div class="cf" style="width: 1200px;margin: 0 auto;">
                <h1 class="top-logo">未来小说网</h1>
                <div class="nav-list site-nav fl">
                    <ul>
                        <li th:each="tagTwo:${tags}" th:if="${tagTwoStat.index} lt 6">
                            <a class="search-info" th:text="${tagTwo}"></a>
                        </li>
                        <li class="more">
                            <a>更多<span></span></a>
                            <div class="dropdown">
                                <a target="_blank">全部作品</a>
                                <a class="search-info" target="_blank" th:each=" tagTwo: ${tags}" th:if="${tagTwoStat.index} gt 5" th:text="${tagTwo}"></a>
                            </div>
                        </li>
                    </ul>
                </div>
                <div class="nav-list min-user fr">
                    <ul>
                        <li id="min-search">
                            <form id="form" method="POST" target="_blank" th:action="@{/search(page=1,per_page=5)}">
                                <input class="search-box" id="goSearch" name="keywords" type="text" placeholder="请输入..." value="" style="padding: 5px;">
                                <input id="keyword" class="fixed-input hide" style="margin-left: 10px;margin-right: 4px;" type="hidden" name="searchBy" value="KEYWORDS">
                                <input class="submit-input" type="hidden" id="searchSubmitType" name="sortBy" value="BEST_MATCH">
                                <button id="search-btn" for="searchSubmit" type="submit" style="background-color: #2470bf;">
                                    <a style="padding-left: 5px;">
                                        <i class="fa fa-search" style="font-size:16px;color: #ffffff;margin: 16px 20px 0 0;"></i>
                                     </a>
                                </button>
                            </form>
                            <li class="line"></li>
                        </li>
                        <li class="sign-out" th:if="${session.currentAccount} eq null">
                            <a id="fixed-login" th:href="@{/login(redirectTo=${@templateController.getRequestUri()}, errorMessage='请先登录')}">登录</a>
                            <a class="reg" th:href="@{/register}" target="_blank">注册</a>
                        </li>
                        <li class="sign-out" th:if="${session.currentAccount} ne null" th:each="user:${session.currentAccount}">
                            <a id="USERNAME" th:text="${user.userName}"></a>
                            <a th:text="${'LV'+user.level}"></a>
                        </li>
                        <li class="line"></li>
                        <li class="book-shelf" id="top-book-shelf">
                            <a th:if="${session.currentAccount} ne null" th:href="${#request.getContextPath()}+'/user/'+${session.currentAccount.uid.toString()}" target="_blank">
                                <i class="fa fa-book" style="font-size:16px">我的书架</i>
                            </a>
                        </li>
                        <li class="avatar" th:each="user:${session.currentAccount}">
                            <a th:href="${#request.getContextPath()}+'/user/'+${session.currentAccount.uid.toString()}" target="_blank">
                                <img th:if="${session.currentAccount} eq null" src="../../resources/img/avatar.png" th:src="@{/resources/img/avatar.png}" style="border-radius: 50%">
                                <img th:if="${session.currentAccount} ne null" th:src="${user.profileImgUrl}" style="border-radius: 50%;width: 40px;height: 40px;">
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <!--用户信息-->
        <div class="box-center" style="margin-top: 100px;background-color: #f5f5f5;">
            <!-- 侧边导航栏-->
            <div class="personal-side">
                <ul class="side-main">
                    <a th:href="@{/}" class="side-ul-a">
                        <i class="fa fa-home" style="font-size:16px"></i>首页
                    </a>
                    <li class="side-parent">
                        <a href="javascript:open()" th:if="${session.currentAccount} ne null and ${session.currentAccount} eq ${showAccount}">
                            <i class="fa fa-edit" style="font-size:16px"></i>
                            <span style="vertical-align: inherit">修改</span>
                        </a>
                        <a th:if="${session.currentAccount} eq null" th:href="@{/login(redirectTo=${@templateController.getRequestUri()})}">
                            <i class="fa fa-edit" style="font-size:16px"></i>
                            <span style="vertical-align: inherit">修改</span>
                        </a>
                    </li>
                    <li th:if="${session.currentAccount} ne null and ${showAccount}eq ${session.currentAccount}" class="side-parent" id="side-parent">
                        <a href="javascript:;">
                            <i class="fa fa-history" style="font-size:16px"></i>
                            <span style="vertical-align:inherit">我的历史</span>
                        </a>
                        <ul class="side-group" id="side-group">
                            <li>
                                <a id="history" href="javascript:;" class="side-list-a">浏览历史</a>
                            </li>
                            <li>
                                <a id="comment" href="javascript:;" class="side-list-a">评论历史</a>
                            </li>
                        </ul>
                    </li>
                    <li th:if="${session.currentAccount} ne null and ${showAccount}ne ${session.currentAccount}" class="side-parent" id="side-parent">
                        <a href="javascript:;">
                            <i class="fa fa-history" style="font-size:16px"></i>
                            <span style="vertical-align:inherit">我的历史</span>
                        </a>
                        <ul class="side-group" id="side-group">
                            <li>
                                <a id="comment" href="javascript:;" class="side-list-a">评论历史</a>
                            </li>
                        </ul>
                    </li>
                    <li th:if="${session.currentAccount} eq null and ${showAccount}ne null" class="side-parent" id="side-parent">
                        <a href="javascript:;">
                            <i class="fa fa-history" style="font-size:16px"></i>
                            <span style="vertical-align:inherit">我的历史</span>
                        </a>
                        <ul class="side-group" id="side-group">
                            <li>
                                <a id="comment" href="javascript:;" class="side-list-a">评论历史</a>
                            </li>
                        </ul>
                    </li>
                    <li th:if="${session.currentAccount} eq null and ${showAccount}eq null" class="side-parent" id="side-parent">
                        <a th:href="@{/login(redirectTo=${@templateController.getRequestUri()})}">
                            <i class="fa fa-history" style="font-size:16px"></i>
                            <span style="vertical-align:inherit">我的历史</span>
                        </a>
                    </li>
                    <a id="shelf" th:if="${session.currentAccount} ne null and ${session.currentAccount}eq${showAccount}" href="javascript:;" class="side-ul-a">
                        <i class="fa fa-book" style="font-size:16px"></i>我的书架
                    </a>
                    <a id="shelf" th:if="${session.currentAccount} ne null and ${session.currentAccount}ne${showAccount}" href="javascript:;" class="side-ul-a">
                        <i class="fa fa-book" style="font-size:16px"></i>ta的书架
                    </a>
                    <a id="shelf" th:if="${session.currentAccount} eq null and ${showAccount} eq null" th:href="@{/login(redirectTo=${@templateController.getRequestUri()})}"  class="side-ul-a">
                        <i class="fa fa-book" style="font-size:16px"></i>ta的书架
                    </a>
                    <a id="shelf" th:if="${session.currentAccount} eq null and ${showAccount} ne null" class="side-ul-a">
                        <i class="fa fa-book" style="font-size:16px"></i>ta的书架
                    </a>
                    <a id="work" th:if="${session.currentAccount} ne null and ${session.currentAccount}eq${showAccount}" href="javascript:;" class="side-ul-a">
                        <i class="fa fa-folder-o" style="font-size:16px"></i>我的作品
                    </a>
                    <a id="work" th:if="${session.currentAccount} ne null and ${session.currentAccount}ne${showAccount}" href="javascript:;" class="side-ul-a">
                        <i class="fa fa-folder-o" style="font-size:16px"></i>ta的作品
                    </a>
                    <a id="work" th:if="${session.currentAccount} eq null and ${showAccount} eq null" th:href="@{/login(redirectTo=${@templateController.getRequestUri()})}" class="side-ul-a">
                        <i class="fa fa-folder-o" style="font-size:16px"></i>我的作品
                    </a>
                    <a id="work" th:if="${session.currentAccount} eq null and ${showAccount} ne null" class="side-ul-a">
                        <i class="fa fa-folder-o" style="font-size:16px"></i>ta的作品
                    </a>
                </ul>
            </div>




            <!-- 中间内容-->
            <div class="home-content" th:if="${session.currentAccount} eq null">
                <div class="home-user-wrap">
                    <div class="home-user-avatar">
                        <a class="user-avatar-a" th:if="${showAccount} eq null">
                            <img class="user-avatar-img profileImgUrl" th:src="@{/resources/img/avatar.png}">
                        </a>
                        <a class="user-avatar-a" th:if="${showAccount} ne null">
                            <img class="user-avatar-img profileImgUrl" th:src="${showAccount.profileImgUrl}">
                        </a>
                    </div>
                    <div class="home-user">
                        <div class="blue-btn-little" th:if="${showAccount} eq null">
                            <a href="javascript:open()" class="button-a button-icon">
                                <i class="fa fa-cog" style="font-size:16px"></i>
                            </a>
                        </div>
                        <h3 th:if="${showAccount} eq null" style="display: inline-block">
                            <a>未登录</a>
                        </h3>
                        <h3 th:if="${showAccount} ne null" style="display: inline-block">
                            <a th:text="${showAccount.userName}"></a>
                        </h3>
                        <span th:if="${showAccount}ne null" style="color: whitesmoke;display: inline-block;margin: 0 5px" th:text="'等级:'+${showAccount.level}"></span>
                        <span th:if="${showAccount}ne null" style="color: whitesmoke;display: inline-block;margin: 0 5px" th:text="'积分:'+${showAccount.experience}"></span>

                    </div>
                </div>
                <div th:if="${showAccount} ne null" id="addToHistory" method="post" class="history-main">
                    <h2 class="history-title">浏览历史</h2>
                    <a href="javascript:;" id="clearAllHistory">清空所有历史</a>
                    <div class="readHistory">
                        <ul style="overflow:hidden;">
                            <li style="margin: 10px 0" th:each="readHistory:${readHistory}">
                                <div class="book-rank-list" style="overflow: hidden;">
                                    <div class="book-rank-img">
                                        <img th:if="${readHistory.coverImgUrl}" th:src="${readHistory.coverImgUrl}" style="width: 100px;float: left;" />
                                        <img th:unless="${readHistory.coverImgUrl}" th:src="@{/resources/img/loading.jpg}" style="width: 100px;float: left;" />
                                    </div>
                                    <div class="book-rank-list-text" style="width:425px;float:left;margin:5px 0 0 20px;">
                                        <h4 style="font-size: 15px;font-weight: 400;" th:text="${readHistory.novelTitle}"></h4>
                                        <h4 style="font-size: 15px;font-weight: 400;" th:text="${readHistory.chapterTitle}"></h4>
                                        <h4 style="font-size: 15px;font-weight: 400;" th:text="${readHistory.title}"></h4>
                                        <p style="font-size: 10px;color: gray;margin-top: 10px;">
                                            <span class="book-rank-writer" th:text="${readHistory.authors}"></span>
                                            <city>|</city>
                                        </p>
                                        <p th:text="${{readHistory.createTime}}+'看过'"></p>
                                    </div>
                                    <div class="rank-book-buttons">
                                        <span class="deleteReadHistory blue-btn" th:attr="uniqueId=${readHistory.uniqueId}">删除</span>
                                        <span class="rank-book-details" th:attr="novelId=${readHistory.novelIndexId}">书籍详情</span>
                                    </div>
                                </div>
                            </li>
                        </ul>
                    </div>
                    <ul class="history-list" style="height: 0px; transition: height 200ms ease 0s;"></ul>
                </div>
                <div id="addComment" class="history-main">
                    <h2 class="history-title">评论历史</h2>
                    <div class="readHistory">
                        <ul id="commentHistory" style="overflow:hidden;">

                        </ul>
                    </div>
                    <ul class="history-list" style="height: 0px; transition: height 200ms ease 0s;"></ul>
                </div>
                <div id="addToShelf" method="post" class="shelf-main">
                    <h2 class="shelf-title">我的书架</h2>
                    <a href="javascript:;" th:if="${session.currentAccount} ne null" id="addShelf">创建收藏夹</a>
                    <a th:if="${session.currentAccount} eq null" th:href="@{/login(redirectTo=${@templateController.getRequestUri()})}" th:id="addShelf">创建收藏夹</a>
                    <div id="ShelfBox">
                        <input type="text" class="input"style="border: 1px solid rgb(68,119,222)" id="addShelfInput" autocomplete="off">
                        <button type="button" id="SureToAddShelf" class="blue-btn" style="width: 65px">确定</button>
                    </div>
                    <ul class="shelf-list" id="shelfList" style="transition: height 200ms ease 0s;">

                    </ul>
                </div>
                <div id="addToMyWork" method="post" class="work-main">
                    <h2 class="work-title">我的作品</h2>
                    <a class="blue-btn fr" th:if="${session.currentAccount} eq ${showAccount}" th:href="@{/novel/create}">创建作品</a>
                    <a href="javascript:;" class="SortBy" onclick="$('#workList').empty();if($('#pd').text()=='false')getAccountAllNovel(1,'RANDOM');" sortBy="RANDOM">随机排序</a>
                    <a href="javascript:;" class="SortBy" onclick="$('#workList').empty();if($('#pd').text()=='false')getAccountAllNovel(1,'COPYRIGHT');" sortBy="COPYRIGHT">版权排序</a>
                    <a href="javascript:;" class="SortBy" onclick="$('#workList').empty();if($('#pd').text()=='false')getAccountAllNovel(1,'PUBDATE');" sortBy="PUBDATE">发布日期排序</a>
                    <a href="javascript:;" class="SortBy" onclick="$('#workList').empty();if($('#pd').text()=='false')getAccountAllNovel(1,'PUBLISHER');" sortBy="PUBLISHER">出版社排序</a>
                    <a href="javascript:;" class="SortBy" onclick="$('#workList').empty();if($('#pd').text()=='false')getAccountAllNovel(1,'RATING');" sortBy="RATING">评分排序</a>
                    <a href="javascript:;" class="SortBy" onclick="$('#workList').empty();if($('#pd').text()=='false')getAccountAllNovel(1,'SERIES');" sortBy="SERIES">系列排序</a>
                    <ul class="work-list" id="workList" style="transition: height 200ms ease 0s;">

                    </ul>
                    <div class="page-box" style="padding: 40px 0;position: relative;">
                        <div class="pagination" style="position: absolute;right: 0;">
                            <div class="box-page">

                            </div>
                        </div>
                    </div>
                </div>
            </div>




            <!-- 中间内容-->
            <div class="home-content" th:if="${session.currentAccount} ne null" th:each="user:${session.currentAccount}">
                <div class="home-user-wrap">
                    <div class="home-user-avatar">
                        <a class="user-avatar-a" th:if="${session.currentAccount} eq ${showAccount}">
                            <img class="user-avatar-img profileImgUrl" th:src="${user.profileImgUrl}">
                        </a>
                        <a class="user-avatar-a" th:if="${session.currentAccount} ne ${showAccount}">
                            <img class="user-avatar-img profileImgUrl" th:src="${showAccount.profileImgUrl}">
                        </a>
                    </div>
                    <div class="home-user">
                        <div class="blue-btn-little" th:if="${showAccouunt}eq null">
                            <a href="javascript:open()" class="button-a button-icon">
                                <i class="fa fa-cog" style="font-size:16px"></i>
                            </a>
                        </div>
                        <h3 style="display: inline-block" th:if="${session.currentAccount} eq ${showAccount}">
                            <a th:text="${user.userName}"></a>
                        </h3>
                        <h3 style="display: inline-block" th:if="${session.currentAccount} ne ${showAccount}">
                            <a th:text="${showAccount.userName}"></a>
                        </h3>
                        <span th:if="${session.currentAccount} eq ${showAccount}" style="color: whitesmoke;display: inline-block;margin: 0 5px" th:text="'等级:'+${user.level}"></span>
                        <span th:if="${session.currentAccount} eq ${showAccount}" style="color: whitesmoke;display: inline-block;margin: 0 5px" th:text="'积分:'+${user.experience}"></span>
                        <span th:if="${session.currentAccount} ne ${showAccount}" style="color: whitesmoke;display: inline-block;margin: 0 5px" th:text="'等级:'+${showAccount.level}"></span>
                        <span th:if="${session.currentAccount} ne ${showAccount}" style="color: whitesmoke;display: inline-block;margin: 0 5px" th:text="'积分:'+${showAccount.experience}"></span>

                        <div class="home-user-data" th:if="${session.currentAccount} eq ${showAccount}">
                            <p>邮箱：<i th:text="${user.email}"></i></p>
                            <p>手机号：<i th:text="${user.phone}"></i></p>
                        </div>
                    </div>
                </div>
                <div id="addToHistory" method="post" class="history-main">
                    <h2 class="history-title">浏览历史</h2>
                    <a href="javascript:;" id="clearAllHistory">清空所有历史</a>

                    <div class="readHistory">
                        <ul style="overflow:hidden;">
                            <li style="margin: 10px 0" th:each="readHistory:${readHistory}">
                                <div class="book-rank-list" style="overflow: hidden;">
                                    <div class="book-rank-img">
                                        <img th:if="${readHistory.coverImgUrl}" th:src="${readHistory.coverImgUrl}" style="width: 100px;float: left;" />
                                        <img th:unless="${readHistory.coverImgUrl}" th:src="@{/resources/img/loading.jpg}" style="width: 100px;float: left;" />
                                    </div>
                                    <div class="book-rank-list-text" style="width:425px;float:left;margin:5px 0 0 20px;">
                                        <h4 style="font-size: 15px;font-weight: 400;" th:text="${readHistory.novelTitle}"></h4>
                                        <h4 style="font-size: 15px;font-weight: 400;margin: 10px 0" th:text="${readHistory.chapterTitle}"></h4>
                                        <h4 style="font-size: 15px;font-weight: 400;" th:text="${readHistory.title}"></h4>
                                        <p style="font-size: 10px;color: gray;margin-top: 10px;margin-bottom: 5px">
                                            <span class="book-rank-writer" th:text="${readHistory.authors}"></span>
                                            <city>|</city>
                                        </p>
                                        <p th:text="${{readHistory.createTime}}+'看过'"></p>
                                    </div>
                                    <div class="rank-book-buttons">
                                        <span class="deleteReadHistory blue-btn" th:attr="uniqueId=${readHistory.uniqueId}">删除</span>
                                        <span class="rank-book-details" th:attr="novelId=${readHistory.novelIndexId}">书籍详情</span>
                                    </div>
                                </div>
                            </li>
                        </ul>
                    </div>
                    <ul class="history-list" style="height: 0px; transition: height 200ms ease 0s;"></ul>
                </div>
                <div id="addComment" class="history-main">
                    <h2 class="history-title">评论历史</h2>
                    <div class="readHistory">
                        <ul id="commentHistory" style="overflow:hidden;">

                        </ul>
                    </div>
                    <ul class="history-list" style="height: 0px; transition: height 200ms ease 0s;"></ul>
                </div>
                <div id="addToShelf" method="post" class="shelf-main">
                    <h2 class="shelf-title" th:if="${session.currentAccount} eq ${showAccount}">我的书架</h2>
                    <h2 class="shelf-title" th:if="${session.currentAccount} ne ${showAccount}">ta的书架</h2>
                    <a href="javascript:;" th:if="${showAccount} eq ${session.currentAccount}" id="addShelf">创建收藏夹</a>
                    <div id="ShelfBox">
                        <input type="text" class="input"style="border: 1px solid rgb(68,119,222)" id="addShelfInput"><button type="button" id="SureToAddShelf" class="blue-btn">确定</button>
                    </div>
                    <ul class="shelf-list" id="shelfList" style="transition: height 200ms ease 0s;">

                    </ul>
                </div>
                <div id="addToMyWork" method="post" class="work-main">
                    <h2 class="work-title" th:if="${session.currentAccount} eq ${showAccount}">我的作品</h2>
                    <h2 class="work-title" th:if="${session.currentAccount} ne ${showAccount}">ta的作品</h2>
                    <div th:if="${session.currentAccount} eq ${showAccount}">
                    <a class="blue-btn fr" th:if="${session.currentAccount} eq ${showAccount}" th:href="@{/novel/create}">创建作品</a>
                    <a href="javascript:;" class="SortBy" onclick="$('#workList').empty();if($('#pd').text()=='false')getAccountAllNovel(1,'RANDOM');" sortBy="RANDOM">随机排序</a>
                    <a href="javascript:;" class="SortBy" onclick="$('#workList').empty();if($('#pd').text()=='false')getAccountAllNovel(1,'COPYRIGHT');" sortBy="COPYRIGHT">版权排序</a>
                    <a href="javascript:;" class="SortBy" onclick="$('#workList').empty();if($('#pd').text()=='false')getAccountAllNovel(1,'PUBDATE');" sortBy="PUBDATE">发布日期排序</a>
                    <a href="javascript:;" class="SortBy" onclick="$('#workList').empty();if($('#pd').text()=='false')getAccountAllNovel(1,'PUBLISHER');" sortBy="PUBLISHER">出版社排序</a>
                    <a href="javascript:;" class="SortBy" onclick="$('#workList').empty();if($('#pd').text()=='false')getAccountAllNovel(1,'RATING');" sortBy="RATING">评分排序</a>
                    <a href="javascript:;" class="SortBy" onclick="$('#workList').empty();if($('#pd').text()=='false')getAccountAllNovel(1,'SERIES');" sortBy="SERIES">系列排序</a>
                    </div>
                        <ul class="work-list" id="workList" style="transition: height 200ms ease 0s;">

                    </ul>
                    <div class="page-box" style="padding: 40px 0;position: relative;">
                        <div class="pagination" style="position: absolute;right: 0;">
                            <div class="box-page">

                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="mask" id="mask"></div>
    <div class="setting-content" id="setting-content" style="width: 625.4px;height:506px;display: none;">
        <div class="setting-record">
            <div class="tabs" id="tabView">
                <a class="tabTarget1 checked">基本设置</a>
                <a class="tabTarget2">头像设置</a>
                <a class="tabTarget3">修改密码</a>
                <a href="javascript:close()" id="close-setting" style="display: none;float: right;"><i class="fa fa-close" style="font-size:16px"></i></a>
            </div>
            <div class="tab-contents" id="tabContents" th:each="user:${session.currentAccount}">
                <div id="tabTarget1" class="tab-content checked">
                    <div class="tab-form">
                        <form id="setBasicForm" action="" method="post">
                            <input type="hidden" name="csrfToken" value="" class="elCsrf">
                            <dl>
                                <dt>用户名：</dt>
                                <input type="text" id="userName" class="input" th:value="${user.userName}">
                            </dl>
                            <dl class="form-higher">
                                <dt>手机号：</dt>
                                <input type="text" id="phone" class="input" th:value="${user.phone}">
                            </dl>
                            <dl class="form-higher">
                                <dt>邮箱号：</dt>
                                <input type="email" id="txtemailnumber" class="input" th:value="${user.email}">
                            </dl>
                            <dl class="form-higher">
                                <dt>验证码：</dt>
                                <input name="activateCode" class="input" type="text" placeholder="请输入验证码" style="width: 149px;" autocomplete="off">
                                <input type="button" id="get-code" value="获取验证码">
                            </dl>
                            <dl class="form-higher">
                                <dt></dt>
                                <dd>
                                    <div>
                                        <input type="submit" id="basicMsgSubmit" class="clip">
                                        <label class="button" id="set">保存</label>
                                    </div>
                                </dd>
                            </dl>
                        </form>
                    </div>
                </div>
                <div id="tabTarget2" class="tab-content">
                    <div id="setAvatarForm" action="">
                        <div id="avatarChoose" class="avatar-choose">
                            <img class="avatar-show" style="float: left;margin-left: 40px;" id="profileImgUrl" th:src="${user.profileImgUrl}" alt="书友的头像">
                            <img id="image-to-crop" style="float: left;width: 150px;height: 150px" onclick="document.getElementById('img-input').click()" class="preview-img" th:src="@{/resources/img/addimg.png}" />
                            <noscript>You need to enable JavaScript to run this app.</noscript>
                            <div id="upload-part" class="upload-img">
                                <label for="img-input">选择图片</label><br />
                                <input type="file" accept="image/*" id="img-input" style="margin: 16px 0"></input>
                                <br />
                                <input type="range" min="0" value="0" max="360" id="rotate-input" style="width: 100%;"></input>
                                <br />
                                <button class="blue-btn" id="confirm-btn" style="margin: 20px 5px">确认并上传</button>
                            </div>
<!--                            <div class="progress">-->
<!--                                &lt;!&ndash; 可以替换成进度条之类的 &ndash;&gt;-->
<!--                                <h1>请稍后...</h1>-->
<!--                            </div>-->
                        </div>
                    </div>
                </div>
                <div id="tabTarget3" class="tab-content">
                    <div class="tab-form">
                            <input type="hidden" name="csrfToken" value="" class="elCsrf">
                            <dl >
                                <dt>新的密码：</dt>
                                <input type="text" id="password1" class="input" value="">
                            </dl>
                            <dl class="form-higher">
                                <dt>再次输入：</dt>
                                <input type="text" id="password2" class="input" value="">
                            </dl>
                            <dl class="form-higher">
                                <dt>验证码：</dt>
                                <input name="activateCode" id="get-code2" class="input" type="text" placeholder="请输入验证码" style="width: 149px;" autocomplete="off">
                                <button type="button" class="button" id="get-code2">获取验证码</button>
                            </dl>
                        <dl class="form-higher">
                                <button id="set2" style="margin-left: 70px" type="button" class="button">确定</button>
                        </dl>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/cropperjs/1.5.7/cropper.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
    <script  th:inline="javascript" async>
        if($("#pd").text()=="false"){
        function show_progress(value) {
            document.getElementsByClassName("progress")[0].style.visibility = value ? 'visible' : 'hidden';
        }
        const image = document.getElementById('image-to-crop');
        $('#img-input').change(function() {
            var path = this.value;
            if (path == undefined || path == null || path == '') {
                alert("未选择文件");
                return;
            }
            const cropper = image.cropper;
            if (cropper != undefined) {
                cropper.destroy();
            }
            var reader = new FileReader();
            reader.onload = function(e) {
                image.setAttribute('src', e.target.result);
                const cropper = new Cropper(image, {
                    aspectRatio: 1,
                    viewMode: 1,
                    rotatable: true
                });
            }
            reader.readAsDataURL(this.files[0]);
        });
        $('#rotate-input').change(function() {
            const cropper = image.cropper;
            if (cropper != undefined) {
                cropper.rotateTo(this.value);
            }
        });
        $('#confirm-btn').click(function() {
            const cropper = image.cropper;
            const contextPath=/*[[${#request.getContextPath()}]]*/'http://localhost:8080/future-novel';
            if (cropper != undefined) {
                show_progress(true);
                cropper.getCroppedCanvas().toBlob(function(blob) {
                    const formData = new FormData();
                    formData.append('file', blob);
                    $.ajax({
                        url:contextPath+"/api/img/upload",
                        method: 'PUT',
                        data: formData,
                        processData: false,
                        contentType: false,
                        success(data) {
                            console.log(data);
                            cropper.destroy();
                            image.setAttribute('src', data.url);
                            show_progress(false);
                            tabAccountInfo();
                        },
                        error(jqXHR) {
                            const data = JSON.parse(jqXHR.responseText);
                            console.log(data);
                            alert(data.errorMessage);
                            show_progress(false);
                        }
                    });
                });
            } else {
                alert("未选择文件");
            }
        });
        const uploadDropBox = document.getElementById("upload-part");
        function doNothing(e) {
            e.stopPropagation();
            e.preventDefault();
        }
        uploadDropBox.addEventListener('dragenter', doNothing, false);
        uploadDropBox.addEventListener('dragover', doNothing, false);
        uploadDropBox.addEventListener('drop', function(e) {
            doNothing(e);
            const dt = e.dataTransfer;
            if (dt.files == undefined || dt.files.length == 0) return;
            const imgFile = dt.files[0];
            if (imgFile != undefined && imgFile.type.startsWith('image/')) {
                const cropper = image.cropper;
                if (cropper != undefined) {
                    cropper.destroy();
                }
                var reader = new FileReader();
                reader.onload = function(e) {
                    image.setAttribute('src', e.target.result);
                    const cropper = new Cropper(image, {
                        aspectRatio: 1,
                        viewMode: 1,
                        rotatable: true
                    });
                }
                reader.readAsDataURL(imgFile);
            }
        }, false);
        }
        function popup_over(icon,color,contant){
            $('body').append('<div class="popup_over" style="text-align: center; line-height: 80px; left: 50%; top: 50%; transform: translate(-50%,-50%); background-color: white; position: fixed; width: 180px; height: 80px; border: 1px solid #D5D6D5; z-index: 1000;"><i class="iconfont '+icon+'" style="font-size: 30px;color: '+color+';"></i><span style="font-size: 16px; position: relative; bottom: 5px;"> '+contant+'</span></div>');
            setTimeout(function(){
                $('.popup_over').remove();
                // clear('.popup_over');
            },1500)
        };
        function open() {
            var s = document.getElementById("mask");
            s.style.display = "block";
            var l = document.getElementById("close-setting");
            l.style.display = "block";
            var c = document.getElementById("setting-content");
            c.style.display = "block";
        }

        function close() {
            var s = document.getElementById("mask");
            s.style.display = "none";
            var l = document.getElementById("close-setting");
            l.style.display = "none";
            var c = document.getElementById("setting-content");
            c.style.display = "none";
        }
        $(".tabTarget1").click(function() {
            $(".tabTarget1").addClass("checked")
            $("#tabTarget2").removeClass("checked");
            $("#tabTarget1").addClass("checked");
            $(".tabTarget2").removeClass("checked");
            $("#tabTarget3").removeClass("checked");
            $(".tabTarget3").removeClass("checked");
        });
        $(".tabTarget2").click(function() {
            $(".tabTarget1").removeClass("checked");
            $(".tabTarget2").addClass("checked");
            $("#tabTarget1").removeClass("checked");
            $("#tabTarget2").addClass("checked");
            $("#tabTarget3").removeClass("checked");
            $(".tabTarget3").removeClass("checked");
        });
        $(".tabTarget3").click(function() {
            $(".tabTarget1").removeClass("checked");
            $(".tabTarget2").removeClass("checked");
            $("#tabTarget1").removeClass("checked");
            $("#tabTarget2").removeClass("checked");
            $("#tabTarget3").addClass("checked");
            $(".tabTarget3").addClass("checked");
        });
        $("#history").click(function() {
            $("#addToHistory").css("display", "block");
            $("#addToShelf").css("display", "none");
            $("#addToMyWork").css("display", "none");
            $("#addComment").css("display", "none");
        })
        $("#shelf").click(function() {
            $("#addToShelf").css("display", "block");
            $("#addToHistory").css("display", "none");
            $("#addToMyWork").css("display", "none");
            $("#addComment").css("display", "none");
        })
        $("#work").click(function() {
            $("#addToMyWork").css("display", "block");
            $("#addToHistory").css("display", "none");
            $("#addToShelf").css("display", "none");
            $("#addComment").css("display", "none");
        })
        $("#comment").click(function() {
            $("#addComment").css("display", "block");
            $("#addToMyWork").css("display", "none");
            $("#addToHistory").css("display", "none");
            $("#addToShelf").css("display", "none");
        })
    </script>
    <script th:inline="javascript" async>
        const showAccount = /*[[${showAccount}]]*/{};
        const currentAccount = /*[[${session.currentAccount}]]*/{};
        console.log(showAccount);
        console.log(currentAccount);
        $("#set").click(function() {
            tabAccountInfo();
        })
        $("#set2").click(function() {
            tabAccountInfo2();
        })
        function tabAccountInfo() {
            const contextPath=/*[[${#request.getContextPath()}]]*/'http://localhost:8080/future-novel';
            $.ajax({
                url: contextPath+"/api/account/edit",
                type: "POST",
                datatype: "json",
                contentType: "application/json;charset=UTF-8",
                data: JSON.stringify({
                    userName: $("#userName").val(),
                    phone: $("#phone").val(),
                    //email:$("#txtemailnumber").val(),
                    profileImgUrl: $("#image-to-crop").attr("src"),
                    //activateCode:
                }),
                success: function(data) {
                    //          console.log(data);
                    popup_over('icon-happy-l','#00ff0f',"修改成功");
                    setTimeout(function () {
                        window.location.reload();
                    },1500)
                },
                err: function(data) {
                    console.log(data);
                }
            })
        }
        function tabAccountInfo2() {
            const contextPath=/*[[${#request.getContextPath()}]]*/'http://localhost:8080/future-novel';
            if($("#password1").val().length<8||$("#password1").val().length>16){
                popup_over('icon-sad','#d81e06',"请输入8-16位密码");
            }else if($("#password1").val()!=$("#password2").val()){
                popup_over('icon-sad','#d81e06',"前后密码输入不一致");
            }else if($("#get-code2").val().length==0){
                popup_over('icon-sad','#d81e06',"验证码不能为空");
            }
            else{
            $.ajax({
                url: contextPath+"/api/account/edit",
                type: "POST",
                datatype: "json",
                contentType: "application/json;charset=UTF-8",
                data: JSON.stringify({
                   password:$("#password1").val(),
                    activateCode:$("#get-code2").val()
                }),
                success: function(data) {
                    //          console.log(data);
                    popup_over('icon-happy-l','#00ff0f',"修改成功");
                    setTimeout(function () {
                        window.location.reload();
                    },1500)
                },
                err: function(data) {
                    console.log(data);
                }
            })
            }
        }
        //获取浏览历史
        function getReadHistory() {
            const contextPath=/*[[${#request.getContextPath()}]]*/'http://localhost:8080/future-novel';
            $.ajax({
                url: contextPath+"/api/account/readHistory/get",
                type: "POST",
                datatype: "json",
                contentType: "application/json;charset=UTF-8",
                data: JSON.stringify({

                }),
                success: function(data) {
                    //      console.log(data)
                },
                error: function(data) {
                    console.log(data);
                }
            })
        }
      //  getReadHistory();
        //删除某条浏览记录
        function delegeReadHistory(HistoryId) {
            const contextPath=/*[[${#request.getContextPath()}]]*/'http://localhost:8080/future-novel';
            $.ajax({
                url: contextPath+"/api/account/readHistory/" + HistoryId,
                type: "delete",
                datatype: "json",
                contentType: "application/json;charset=UTF-8",
                data: {},
                success: function(data) {
                    popup_over('icon-happy-l','#00ff0f',"删除成功");
                },
                error: function(data) {
                    console.log(data);
                }
            })
        }
        //获取用户所有小说的页数
        function geNovelAllPage() {
            const contextPath=/*[[${#request.getContextPath()}]]*/'http://localhost:8080/future-novel';
            $.ajax({
                url: contextPath + '/api/novel/user/' + $("#AccoundId").text() +'/pages',
                type: "GET",
                datatype: "json",
                contentType: "application/json;charset=UTF-8",
                data: {
                    per_page: 5
                },
                success: function(data) {
                    //    console.log(data)
                    if (data.pages != 1) {
                        for (var i = 1; i <= data.pages; i++) {
                            $(".box-page").append("<span class=\"rank-page\">" + "" + i + "" + "</span>")
                        }
                    }
                },
                error: function(data) {
                    console.log(data);
                }
            })
        }

        //获取当前显示用户所有小说的页数
        function geShowNovelAllPage() {
            const contextPath=/*[[${#request.getContextPath()}]]*/'http://localhost:8080/future-novel';
            $.ajax({
                url: contextPath + '/api/novel/user/' + showAccount.uid +'/pages',
                type: "GET",
                datatype: "json",
                contentType: "application/json;charset=UTF-8",
                data: {
                    per_page: 5
                },
                success: function(data) {
                    //    console.log(data)
                    if (data.pages != 1) {
                        for (var i = 1; i <= data.pages; i++) {
                            $(".box-page").append("<span class=\"rank-page\">" + "" + i + "" + "</span>")
                        }
                    }
                },
                error: function(data) {
                    console.log(data);
                }
            })
        }
        if($("#pd").text()=="false"&&JSON.stringify(showAccount)==JSON.stringify(currentAccount)) {
            geNovelAllPage();
        }else if(JSON.stringify(showAccount)!=JSON.stringify(currentAccount)){
            geShowNovelAllPage();
        }

        //获取当前登录用户所有小说
        function getAccountAllNovel(page, sortBy) {
            const contextPath=/*[[${#request.getContextPath()}]]*/'http://localhost:8080/future-novel';
            $.ajax({
                url:contextPath+'/api/novel/user/' + $("#AccoundId").text() +'/get',
                type: "GET",
                datatype: "json",
                contentType: "application/json;charset=UTF-8",
                data: {
                    per_page: 5,
                    page: page,
                    sort_by: sortBy,
                },
                success: function(data) {
                     if(data!=undefined){
                    for (var i = 0; i < data.length; i++) {
                        if( data[i].coverImgUrl==null){
                            data[i].coverImgUrl=/*[[@{/resources/img/loading.jpg}]]*/'';
                        }
                        $("#workList").append("<li>\n" +
                            "                            <div class=\"book-rank-list\" style=\"overflow: hidden;\">\n" +
                            "                                <div class=\"book-rank-img\">\n" +
                            "                                <div class=\"book-rank-img\">\n" +
                            "                                    <img src='" + "" + data[i].coverImgUrl + "" + "' style=\"width: 100px;float: left;\"/>\n" +
                            "                                </div>\n" +
                            "                                <div class=\"book-rank-list-text\"   style=\"width:425px;float:left;margin:5px 0 0 20px;\">\n" +
                            "                                    <h4 style=\"font-size: 15px;display: inline-block;margin-top:10px;\">" + "" + data[i].title + "" + "</h4><button class='blue-btn removeNovel' novelid='" + "" + data[i].uniqueId + "" + "'>删除</button>\n" +
                            "                                    <p style=\"font-size: 10px;color: gray;margin-top: 25px;\">\n" +
                            "                                        <span class=\"book-rank-writer\">" + "" + data[i].authors + "" + "</span><city>|</city>\n" +
                            "                                        <span class=\"book-rank-writer\">" + "" + data[i].publisher + "" + "</span><city>|</city>\n" +
                            "                                        <span class=\"book-rank-writer\">" + "" + data[i].tags + "" + "</span><city>|</city>\n" +
                            "                                        <span class=\"book-rank-writer\">" + "" + '共有' + data[i].chapters.length + '章' + "" + "</span><city>|</city>\n" +
                            "                                    </p>\n" +
                            "                                    <span class=\"book-rank-synopsis\">" + "" + data[i].description + "" + "</span>\n" +
                            "                                </div>\n" +
                            "                                <div class=\"rank-book-buttons\">\n" +
                            "                                    <span class=\"rank-book-write\" uploaderId='" + data[i].uploader + "" + "' novelId='" + data[i].uniqueId + "' >编写书籍</span>\n" +
                            "                                    <span class=\"rank-book-details\" uploaderId='" + data[i].uploader + "" + "' novelId='" + data[i].uniqueId + "'>书籍详情</span>\n" +
                            "                                </div>\n" +
                            "                            </div>\n" +
                            "                            </div>\n" +
                            "                        </li>");
                    }
                     }
                },
                error: function(data) {
                    if($("#pd").text()=="false") {
                        console.log(data);
                    }
                }
            });
        }
        //获取当前显示用户所有小说
        function getShowAccountAllNovel(page, sortBy) {
            const contextPath=/*[[${#request.getContextPath()}]]*/'http://localhost:8080/future-novel';
            $.ajax({
                url:contextPath+'/api/novel/user/' + showAccount.uid +'/get',
                type: "GET",
                datatype: "json",
                contentType: "application/json;charset=UTF-8",
                data: {
                    per_page: 5,
                    page: page,
                    sort_by: sortBy,
                },
                success: function(data) {
                    if(data!=undefined){
                        console.log(data);
                        for (var i = 0; i < data.length; i++) {
                            if( data[i].coverImgUrl==null){
                            data[i].coverImgUrl=/*[[@{/resources/img/loading.jpg}]]*/'';
                            }
                            $("#workList").append("<li>\n" +
                                "                            <div class=\"book-rank-list\" style=\"overflow: hidden;\">\n" +
                                "                                <div class=\"book-rank-img\">\n" +
                                "                                <div class=\"book-rank-img\">\n" +
                                "                                    <img src='" + "" + data[i].coverImgUrl + "" + "' style=\"width: 100px;float: left;\"/>\n" +
                                "                                </div>\n" +
                                "                                <div class=\"book-rank-list-text\"   style=\"width:425px;float:left;margin:5px 0 0 20px;\">\n" +
                                "                                    <h4 style=\"font-size: 15px;display: inline-block;margin-top:10px;\">" + "" + data[i].title + "" + "</h4>\n" +
                                "                                    <p style=\"font-size: 10px;color: gray;margin-top: 25px;\">\n" +
                                "                                        <span class=\"book-rank-writer\">" + "" + data[i].authors + "" + "</span><city>|</city>\n" +
                                "                                        <span class=\"book-rank-writer\">" + "" + data[i].publisher + "" + "</span><city>|</city>\n" +
                                "                                        <span class=\"book-rank-writer\">" + "" + data[i].tags + "" + "</span><city>|</city>\n" +
                                "                                        <span class=\"book-rank-writer\">" + "" + '共有' + data[i].chapters.length + '章' + "" + "</span><city>|</city>\n" +
                                "                                    </p>\n" +
                                "                                    <span class=\"book-rank-synopsis\">" + "" + data[i].description + "" + "</span>\n" +
                                "                                </div>\n" +
                                "                                <div class=\"rank-book-buttons\">\n" +
                                "                                    <span class=\"rank-book-details\" uploaderId='" + data[i].uploader + "" + "' novelId='" + data[i].uniqueId + "'>书籍详情</span>\n" +
                                "                                </div>\n" +
                                "                            </div>\n" +
                                "                            </div>\n" +
                                "                        </li>");
                        }
                    }
                },
                error: function(data) {
                    if($("#pd").text()=="false") {
                        console.log(data);
                    }
                }
            });
        }
        //获取用户评论历史
        function getAccountComment(page) {
            const contextPath=/*[[${#request.getContextPath()}]]*/'http://localhost:8080/future-novel';
            $.ajax({
                url:contextPath + '/api/account/' + $("#AccoundId").text() +'/comment/get',
                type: "GET",
                datatype: "json",
                contentType: "application/json;charset=UTF-8",
                data: {
                    per_page: 10,
                    page: page
                },
                success: function(data) {
                    for(var i=0;i<data.length;i++){
                        $("#commentHistory").append("<li>\n" +
                            "<img src='" + "" + data[i].profileImgUrl+ "" + "' class=\"profileImgUrl\" style='float: left'>\n" +
                            "<div style='margin-left: 90px' class=\"our-say cf\"\n" +
                            "<h4>\n" +
                            "<a href=\"#\">"+""+data[i].userName+""+"</a><a href='###' class='as' style='margin-left: 10px'>等级："+""+data[i].level+""+"</a>\n" +
                            "</h4>\n" +
                            "<p id=\"\"style='border: 1px solid;width: 211px;padding: 4px;margin: 10px 0'>"+""+data[i].text+""+"</p>\n" +
                            "<p>评分："+""+data[i].rating+""+"</p>\n" +
                            "<a type=\"button\" class=\"remove\" commentId='"+""+data[i].uniqueId+""+"' style=\"color: rgb(179, 174, 174);font-size: 14px;cursor: pointer;\">删除</a>\n" +
                            "<a href='#' class='as' style='float: right'>"+""+data[i].createTime+""+"</a></div>\n" +
                            "</li>");
                    }
                },
                error: function(data) {
                    console.log(data);
                }
            })
        }
        //获取当前显示用户的评论历史
        function getshowAccountComment(page) {
            const contextPath=/*[[${#request.getContextPath()}]]*/'http://localhost:8080/future-novel';
            $.ajax({
                url:contextPath + '/api/account/' + showAccount.uid +'/comment/get',
                type: "GET",
                datatype: "json",
                contentType: "application/json;charset=UTF-8",
                data: {
                    per_page: 10,
                    page: page
                },
                success: function(data) {
                    if(data!=undefined){
                    for(var i=0;i<data.length;i++){
                        $("#commentHistory").append("<li>\n" +
                            "<img src='" + "" + data[i].profileImgUrl+ "" + "' class=\"profileImgUrl\" style='float: left'>\n" +
                            "<div style='margin-left: 90px' class=\"our-say cf\"\n" +
                            "<h4>\n" +
                            "<a href=\"###\">"+""+data[i].userName+""+"</a><a href='###' class='as' style='margin-left: 10px'>等级："+""+data[i].level+""+"</a>\n" +
                            "</h4>\n" +
                            "<p id=\"\">"+""+data[i].text+""+"</p>\n" +
                            "<p>评分："+""+data[i].rating+""+"</p>\n" +
                            "<a href='###' class='as' style='float: right'>"+""+data[i].createTime+""+"</a></div>\n" +
                            "</li>");
                    }
                }},
                error: function(data) {
                    console.log(data);
                }
            })
        }
        if($("#pd").text()=="false" && JSON.stringify(currentAccount)==JSON.stringify(showAccount)) {
            getAccountComment(1);
        }else if(JSON.stringify(currentAccount)!=JSON.stringify(showAccount)){
            getshowAccountComment(1);
        }

        $("#commentHistory").on("click",".remove",function () {
            var str=$(this).attr("commentId");
            removeComment(str);
            $(this).parent().parent().remove();
        })
        //删除评论历史
        function removeComment(uniqueId) {
            const contextPath=/*[[${#request.getContextPath()}]]*/'http://localhost:8080/future-novel';
            $.ajax({
                url:contextPath+"/api/comment/"+uniqueId,
                type:"DELETE",
                datatype:"JSON",
                contentType: "application/json;charset=UTF-8",
                data:{},
                success:function (data) {
                    popup_over('icon-happy-l','#00ff0f',"删除成功");
                },error:function (data) {
                    console.log(data)
                }
            })
        }
        //删除所有历史
        function removeAllHistory() {
            const contextPath=/*[[${#request.getContextPath()}]]*/'http://localhost:8080/future-novel';
            $.ajax({
                url:contextPath+"/api/account/readHistory/clear",
                type: "DELETE",
                dataType: "text",
                contentType: "application/json;charset=UTF-8",
                data:JSON.stringify({}),
                success: function() {
                    popup_over('icon-happy-l','#00ff0f',"已成功删除所有记录");
                },
                error: function(data) {
                    console.log(data);
                }
            })
        }
        $("#clearAllHistory").click(function() {
            var clearAllHistory=confirm("确定清空所有历史吗？");
            if(clearAllHistory==true){
                removeAllHistory();
                $(".readHistory").remove();
            }
            })
            //更改邮箱时获取验证码
        $("#get-code").click(function() {
            const email = $("#txtemailnumber").val();
            if (!$("#txtemailnumber").val().match(/^(\w){3,}(\.\w+)*@(\w){2,}((\.\w+)+)$/)) {
                alert("请填写正确的邮箱地址");
                return;
            }
            $("#get-code").attr('disabled', true).html("30秒后可重试");
            $.ajax({
                url: /*[[${#request.getContextPath()} + '/api/sendCaptcha']]*/ "/",
                type: 'POST',
                dataType: "JSON",
                contentType: "application/json;charset=UTF-8",
                data: JSON.stringify({
                    email: email
                }),
                success: function() {
                    $("#get-code").attr('disabled', true).html("30秒后可重试");
                    const interval = setInterval(function() {
                        const htmlobj = $("#get-code");
                        let remaintime = parseInt(htmlobj.html().substr(0, 2));
                        remaintime--;
                        if (remaintime < 10) remaintime = "0" + remaintime;
                        htmlobj.html(remaintime + "秒后可重试");
                    }, 1000);
                    setTimeout(function() {
                        $("#get-code").attr('disabled', false).html('重新发送');
                        clearInterval(interval);
                    }, 30000);
                },
                error: function(jqXHR, textStatus, errorThrown) {
                    const data = JSON.parse(jqXHR.responseText);
                    alert("发送失败，请稍候再试:" + data.errorMessage);
                    $("#get-code").attr('disabled', false).html("发送");
                }
            });
        });
        $("#get-code2").click(function() {
            const email = $("#txtemailnumber").val();
            if (!$("#txtemailnumber").val().match(/^(\w){3,}(\.\w+)*@(\w){2,}((\.\w+)+)$/)) {
                alert("请填写正确的邮箱地址");
                return;
            }
            $("#get-code2").attr('disabled', true).html("30秒后可重试");
            $.ajax({
                url: /*[[${#request.getContextPath()} + '/api/sendCaptcha']]*/ "/",
                type: 'POST',
                dataType: "JSON",
                contentType: "application/json;charset=UTF-8",
                data: JSON.stringify({
                    email: email
                }),
                success: function() {
                    $("#get-code2").attr('disabled', true).html("30秒后可重试");
                    const interval = setInterval(function() {
                        const htmlobj = $("#get-code2");
                        let remaintime = parseInt(htmlobj.html().substr(0, 2));
                        remaintime--;
                        if (remaintime < 10) remaintime = "0" + remaintime;
                        htmlobj.html(remaintime + "秒后可重试");
                    }, 1000);
                    setTimeout(function() {
                        $("#get-code2").attr('disabled', false).html('重新发送');
                        clearInterval(interval);
                    }, 30000);
                },
                error: function(jqXHR, textStatus, errorThrown) {
                    const data = JSON.parse(jqXHR.responseText);
                    alert("发送失败，请稍候再试:" + data.errorMessage);
                    $("#get-code2").attr('disabled', false).html("发送");
                }
            });
        });
        //获取用户所有收藏夹
        function getAllAcconutShelf() {
            const contextPath=/*[[${#request.getContextPath()}]]*/'http://localhost:8080/future-novel';
            $.ajax({
                url:contextPath + '/api/account/' + $("#AccoundId").text() +'/bookSelves',
                type: "GET",
                datatype: "json",
                contentType: "application/json;charset=UTF-8",
                data: {},
                success: function(data) {
                    console.log(data);
                    $("#shelfList").empty();
                    for (let i = 0; i < data.length; i++) {
                        $("#shelfList").append("<button class='removeSelf blue-btn' uniqueId='" + "" + data[i].uniqueId + "" + "'>删除</button><a href=\"javascript:;\" uniqueId='" + "" + data[i].uniqueId + "" + "'  class=\"slidPar\">" + "" + data[i].title + "" + "</a>" +
                            "<ul uniqueId='" + "" + data[i].uniqueId + "" + "' class='NovelList' id='NovelList" + "" + data[i].uniqueId + "" + "'></ul>");
                        for (let j = 0; j < data[i].novels.length; j++) {
                            if( data[i].novels[j].coverImgUrl==null){
                                data[i].novels[j].coverImgUrl=/*[[@{/resources/img/loading.jpg}]]*/'';
                            }
                            $("#NovelList"+data[i].uniqueId).append("<li style=\"margin: 10px 0\" class='a' uniqueId='" + "" + data[i].uniqueId + "" + "' >\n" +
                                "                            <div class=\"book-rank-list\" style=\"overflow: hidden;\">\n" +
                                "                                <div class=\"book-rank-img\">\n" +
                                "                                    <img src='" + "" + data[i].novels[j].coverImgUrl + "" + "' style=\"width: 100px;float: left;\" />\n" +
                                "                                </div>\n" +
                                "                                <div class=\"book-rank-list-text\" style=\"width:425px;float:left;margin:5px 0 0 20px;\">\n" +
                                "                                    <p style=\"font-size: 10px;color: gray;margin-top: 10px;\">\n" +
                                "                                        <span class=\"book-rank-writer\">" + "" + data[i].novels[j].authors + "" + "</span><city>|</city>\n" +
                                "                                        <span class=\"book-rank-writer\">" + "" + data[i].novels[j].publisher + "" + "</span><city>|</city>\n" +
                                "                                        <span class=\"book-rank-writer\">" + "" + data[i].novels[j].series + "" + "</span><city>|</city>\n" +
                                "                                        \n" +
                                "                                    </p>\n" +
                                "                                    <span class=\"book-rank-synopsis\">" + "" + data[i].novels[j].description + "" + "</span>\n" +
                                "                                </div>\n" +
                                "                                <div class=\"rank-book-buttons\">\n" +
                                "                                    <span class=\"deleteNovelShelf blue-btn\" uniqueId='" + "" + data[i].uniqueId + "" + "' novelId='" + "" + data[i].novels[j].uniqueId + "" + "'>删除</span>\n" +
                                "                                    <span class=\"rank-book-details\" novelId='" + "" + data[i].novels[j].uniqueId + "" + "'>书籍详情</span>\n" +
                                "                                </div>\n" +
                                "                            </div>\n" +
                                "                        </li>")
                        }
                    }
                },
                error: function(data) {
                    console.log(data);
                }
            })
        }
        //获取当前显示用户所有收藏夹
        function getAllShowAcconutShelf() {
            const contextPath=/*[[${#request.getContextPath()}]]*/'http://localhost:8080/future-novel';
            $.ajax({
                url:contextPath + '/api/account/' + showAccount.uid +'/bookSelves',
                type: "GET",
                datatype: "json",
                contentType: "application/json;charset=UTF-8",
                data: {},
                success: function(data) {
                    console.log(data);
                    $("#shelfList").empty();
                    for (let i = 0; i < data.length; i++) {
                        $("#shelfList").append("<a href=\"javascript:;\" uniqueId='" + "" + data[i].uniqueId + "" + "'  class=\"slidPar\">" + "" + data[i].title + "" + "</a>" +
                            "<ul uniqueId='" + "" + data[i].uniqueId + "" + "' class='NovelList' id='NovelList" + "" + data[i].uniqueId + "" + "'></ul>");
                        for (let j = 0; j < data[i].novels.length; j++) {
                            if( data[i].novels[j].coverImgUrl==null){
                                data[i].novels[j].coverImgUrl=/*[[@{/resources/img/loading.jpg}]]*/'';
                            }
                            $("#NovelList"+data[i].uniqueId).append("<li style=\"margin: 10px 0\" class='a' uniqueId='" + "" + data[i].uniqueId + "" + "' >\n" +
                                "                            <div class=\"book-rank-list\" style=\"overflow: hidden;\">\n" +
                                "                                <div class=\"book-rank-img\">\n" +
                                "                                    <img src='" + "" + data[i].novels[j].coverImgUrl + "" + "' style=\"width: 100px;float: left;\" />\n" +
                                "                                </div>\n" +
                                "                                <div class=\"book-rank-list-text\" style=\"width:425px;float:left;margin:5px 0 0 20px;\">\n" +
                                "                                    <p style=\"font-size: 10px;color: gray;margin-top: 10px;\">\n" +
                                "                                        <span class=\"book-rank-writer\">" + "" + data[i].novels[j].authors + "" + "</span><city>|</city>\n" +
                                "                                        <span class=\"book-rank-writer\">" + "" + data[i].novels[j].publisher + "" + "</span><city>|</city>\n" +
                                "                                        <span class=\"book-rank-writer\">" + "" + data[i].novels[j].series + "" + "</span><city>|</city>\n" +
                                "                                        \n" +
                                "                                    </p>\n" +
                                "                                    <span class=\"book-rank-synopsis\">" + "" + data[i].novels[j].description + "" + "</span>\n" +
                                "                                </div>\n" +
                                "                                <div class=\"rank-book-buttons\">\n" +
                                "                                    <span class=\"rank-book-details\" novelId='" + "" + data[i].novels[j].uniqueId + "" + "'>书籍详情</span>\n" +
                                "                                </div>\n" +
                                "                            </div>\n" +
                                "                        </li>")
                        }
                    }
                },
                error: function(data) {
                    console.log(data);
                }
            })
        }

        if($("#pd").text()=="false"&&JSON.stringify(currentAccount)==JSON.stringify(showAccount)) {
            getAllAcconutShelf();
        }else if(JSON.stringify(currentAccount)!=JSON.stringify(showAccount)){
            getAllShowAcconutShelf();
        }


        $("#SureToAddShelf").click(function() {
                addShelf();
            if($('#addShelfInput').val()==''){
                $("#shelfList").prepend("<button class='removeSelf blue-btn'>删除</button><a href=\"javascript:;\"  class=\"slidPar\">" + "" + $('#USERNAME').text()+'的书架'+ "" + "</a>" +
                    "<ul class='NovelList' ></ul>");
            }
                if($('#addShelfInput').val()!=''){
                    $("#shelfList").prepend("<button class='removeSelf blue-btn'>删除</button><a href=\"javascript:;\"  class=\"slidPar\">" + "" + $('#addShelfInput').val()+ "" + "</a>" +
                        "<ul class='NovelList' ></ul>");
                }
        })
        //添加收藏夹
        function addShelf() {
            const contextPath=/*[[${#request.getContextPath()}]]*/'http://localhost:8080/future-novel';
            $.ajax({
                url: contextPath+"/api/bookSelf/create",
                type: "POST",
                datatype: "JSON",
                contentType: "application/json;charset=UTF-8",
                data: JSON.stringify({
                    title:  $("#addShelfInput").val().length==0?null:$("#addShelfInput").val(),
                }),
                success: function(data) {
                    console.log(data);
                    $("#ShelfBox").css("display", "none");
                    popup_over('icon-happy-l','#00ff0f',"添加成功");
                },
                error: function(data) {
                    console.log(data);
                }
            })
        }
        //删除收藏夹里边的小说
        function removeSelfNovel(bookSelfId, novelIndexId) {
            const contextPath=/*[[${#request.getContextPath()}]]*/'http://localhost:8080/future-novel';
            $.ajax({
                url:contextPath+"/api/bookSelf/" + bookSelfId + "/remove",
                type: "POST",
                datatype: "JSON",
                contentType: "application/json;charset=UTF-8",
                data: JSON.stringify({
                    novelIndexId: novelIndexId
                }),
                success: function(data) {
                    popup_over('icon-happy-l','#00ff0f',"删除成功");
                },
                error: function(data) {
                    console.log(data);
                }
            })
        }
        //删除收藏夹
        function removeSelf(bookSelfId) {
            const contextPath=/*[[${#request.getContextPath()}]]*/'http://localhost:8080/future-novel';
            $.ajax({
                url: contextPath+"/api/bookSelf/" + bookSelfId,
                type: "DELETE",
                datatype: "JSON",
                contentType: "application/json;charset=UTF-8",
                data: {},
                success: function(data) {
                    popup_over('icon-happy-l','#00ff0f',"删除成功");
                },
                error: function(data) {
                    console.log(data);
                }
            })
        }
        function removeAccoundNovel(novelId){
            const contextPath=/*[[${#request.getContextPath()}]]*/'http://localhost:8080/future-novel';
            $.ajax({
                url: contextPath+"/api/novel/" + novelId,
                type: "DELETE",
                datatype: "JSON",
                contentType: "application/json;charset=UTF-8",
                data: {},
                success: function(data) {
                    popup_over('icon-happy-l','#00ff0f',"删除成功");
                },
                error: function(data) {
                    console.log(data);
                }
            })
        }
        $(".rank-book-buttons").on("click", ".rank-book-details", function() {
            const contextPath=/*[[${#request.getContextPath()}]]*/'http://localhost:8080/future-novel';
            window.location.href = contextPath+"/novel/" + $(this).attr("novelId") + "/view";
        })
        $("#workList").on("click", ".rank-book-details", function() {
            const contextPath=/*[[${#request.getContextPath()}]]*/'http://localhost:8080/future-novel';
            window.location.href = contextPath+"/novel/" + $(this).attr("novelId") + "/view";
        })
        $("#workList").on("click", ".rank-book-write", function() {
            const contextPath=/*[[${#request.getContextPath()}]]*/'http://localhost:8080/future-novel';
            window.location.href = contextPath+"/novel/" + $(this).attr("novelId") + "/write";
        })
        $(".rank-book-buttons").on("click", ".deleteReadHistory", function() {
            delegeReadHistory($(this).attr("uniqueId"));
            $(this).parent().parent().parent().empty();
        })
        if($("#pd").text()=="false"&&JSON.stringify(currentAccount)==JSON.stringify(showAccount)) {
            getAccountAllNovel(1, "HOT_DESC");
        }
        if(JSON.stringify(currentAccount)!=JSON.stringify(showAccount)) {
            getShowAccountAllNovel(1,"HOT_DESC");
        }
        $(".box-page").on("click", ".rank-page", function() {
            $(this).toggleClass("tab");
            $(this).siblings().removeClass("tab");
            $("#workList").empty();
            if($("#pd").text()=="false"&&JSON.stringify(showAccount)==JSON.stringify(currentAccount)) {
                getAccountAllNovel($(this).text(),"HOT_DESC");
            }else if(JSON.stringify(showAccount)!=JSON.stringify(currentAccount)){
                getShowAccountAllNovel($(this).text(),"HOT_DESC")
            }

        })
        $("#addShelf").click(function() {
            $("#ShelfBox").css("display", "block");
        })
        $(".shelf-list").on("click", ".slidPar", function() {
            $(this).next().slideToggle("slow");
        })
        $(".shelf-list").on("click", ".rank-book-details", function() {
            const contextPath=/*[[${#request.getContextPath()}]]*/'http://localhost:8080/future-novel';
            window.location.href = contextPath+"/novel/" + $(this).attr("novelId") + "/view";
        })
        $(".shelf-list").on("click", ".deleteNovelShelf", function() {
            var str1 = $(this).attr("uniqueId");
            var str2 = $(this).attr("novelId");
            removeSelfNovel(str1, str2);
            $(this).parent().parent().parent().remove();
        })
        $(".shelf-list").on("click", ".removeSelf", function() {
            var str3 = $(this).attr("uniqueId");
            removeSelf(str3);
            $(this).next().next().remove();
            $(this).next().remove();
            $(this).remove();
        })
        $("#workList").on("click",".removeNovel",function () {
            var str4=$(this).attr("novelId")
            removeAccoundNovel(str4);
            $(this).parent().parent().parent().parent().remove();
        })
        // 按照标签搜索
        $(".search-info").click(function () {
            console.log($(this).text());
            $("#goSearch").attr("value", $(this).text());
            $("#form").submit();
        });
    </script>
</body>

</html>